<template>
  <div>
    <el-container>
      <el-main style="padding:0;">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            活动管理
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>团队奖励
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>创建活动
          </p>
          <br />
          <p class="titlelist-twop">
            配置预览图
            &nbsp;&nbsp;
            <span>大小：345x140px</span>
            <span>图片大小建议不超过1M；</span>
            <span>请最少上传一张预览图，最多可以上传3张</span>
          </p>
          <div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-error="handleFail"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <p class="titlelist-twop">
            配置活动背景图
            &nbsp;&nbsp;
            <span>图片大小建议不超过1M；</span>
            <span>请最少上传一张预览图，最多可以上传3张</span>
          </p>
          <div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-error="handleFail"

            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <!-- 提示框 -->
          <div>
            <el-button type="primary" @click="dialogVisible = true">完成</el-button>
            <el-button type="button">取消</el-button>
            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <span>提交活动后，活动会实时更新</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
        <br />
      </el-main>
      <br />
    </el-container>
  </div>
</template>
<script type="text/ecmascript-6">
import EventDetails from "./eventDetails";
import AddMachinesActivity from "./addMachinesActivity";
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from "qs";
export default {
  data() {
    return {
      formInline: {
        activeName: "",
        status: "",
        startDate: "",
        endDate: "",
        imageUrl: "",
        oemUid: localStorage.getItem("uid"),
        page: 1,
        number: 10,
      },
      dataTime: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      jurisdiction: "",
    };
  },
  components: {
    EventDetails,
    AddMachinesActivity,
  },
  mounted() {
    this.queryPayActiveList();
    this.jurisdiction = localStorage.getItem("jurisdiction"); //判断当前用户 0-OEM  2-admin
  },
  methods: {
    handleFail() {
      layer.open({
        content: "图片上传失败，请重新上传",
        skin: "msg",
        time: 1, //1秒后自动关闭
      });
    },
    // 重置
    reset() {
      this.formInline.officeName = "";
      this.formInline.phone = "";
      this.formInline.activeName = "";
      this.formInline.status = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
    },
    activeUidData(id) {
      this.eventShow = true;
      this.activeUid = id;
    },

    auditShop() {},
    eventsuccess() {
      bus.$on("eventsuccess", (res) => {
        this.eventShow = res;
      });
    },
    activity(type, id) {
      this.activeUid = id;
      this.activityType = type;
      this.machinesShow = true;
    },
    machinesSuccess() {
      bus.$on("machinesSuccess", (res) => {
        this.machinesShow = res.show;
        if (res.type == 1) {
          this.queryPayActiveList();
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 345 / 140 < 2000;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传头像图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
  },
};
</script>
<style scoped>
.el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: 0;
}
.avatar-uploader {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 345px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.elbtn {
  margin-left: 80%;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
  text-align: center;
  margin: 0 auto;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #222;
  margin-top: 40px;
  font-weight: bold;
}
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
  line-height: 31px;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  padding-bottom: 0;
  box-sizing: border-box;
  border-radius: 5px;
}
.el-form--inline .el-form-item {
  margin-right: 0;
}
.el-input {
  width: 300px;
}
.status1 {
  width: 300px;
}
.el-range-separator {
  padding: 0 5px;
  line-height: 32px;
  width: 10%;
  color: #303133;
}
.el-from-item:nth-child(2) {
  margin-left: 80px;
}
.titlelist-twop {
  font-size: 16px;
  line-height: 21px;
}
</style>
